<template>
    <Header />
    <div class="content">
        <Post />
        <div class="search-container">
            <el-select v-model="category_id" placeholder="请选择选项" class="search-select" :disabled="loading">
                <el-option label="请选择" value=""></el-option> <!-- 添加空选项 -->
                <el-option v-for="category in selectedOption" :key="category.id" :label="category.name"
                    :value="category.id">
                </el-option>
            </el-select>
            <el-input placeholder="请输入关键词" v-model="searchname" clearable @keyup.enter="getData" class="search-input"
                :disabled="loading">
                <template #append>
                    <el-button @click="getData" class="search-button" :disabled="loading">搜索</el-button>
                </template>
            </el-input>
        </div>
        <el-row :gutter="15" class="content_item">
            <el-col :span="24">
                <el-card shadow="never">
                    <template #header>
                        <div class="header-container">
                            <div class="icon-container">
                                <el-icon class="Management">
                                    <Management />
                                </el-icon>
                            </div>
                            <div class="text-container">
                                <h3>食谱列表</h3>
                                <p style="color: #aaa; font-size: 13px;">一个高端的美食分享平台</p>
                            </div>
                        </div>
                    </template>
                    <el-row :gutter="20">
                        <template v-if="loading">
                            <el-col :span="24" v-for="n in 4" :key="n" class="recipe-item">
                                <el-card shadow="hover" class="recipe-card">
                                    <el-row type="flex">
                                        <el-col :span="8" class="recipe-image">
                                            <el-skeleton-item variant="image" style="width: 100%; height: 100px;" />
                                        </el-col>
                                        <el-col :span="16" class="recipe-details">
                                            <el-skeleton :rows="4" animated />
                                        </el-col>
                                    </el-row>
                                </el-card>
                            </el-col>
                        </template>
                        <template v-else-if="recipeList.length === 0">
                            <el-empty description="暂无数据"></el-empty>
                        </template>
                        <template v-else>
                            <el-col :span="24" v-for="(recipe, index) in recipeList" :key="index" class="recipe-item">
                                <el-card shadow="hover" class="recipe-card">
                                    <el-row type="flex">
                                        <el-col :span="8" class="recipe-image">
                                            <el-image :src="`http://localhost/storage/${recipe.image}`"
                                                :preview-src-list="[`http://localhost/storage/${recipe.image}`]"
                                                :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :initial-index="0"
                                                fit="cover" alt="食谱图片" class="recipe-img" />
                                        </el-col>
                                        <el-col :span="16" class="recipe-details">
                                            <div
                                                @click="$router.push({ name: 'recipeDetail', params: { id: recipe.id } })">
                                                <div class="recipe-title">
                                                    <el-tag>{{ recipe.category_name }}</el-tag>
                                                    {{ recipe.title }}
                                                </div>
                                                <div class="recipe-meta" style="margin: 10px;">
                                                    <span class="recipe-author">{{ recipe.username }}</span>
                                                    <span class="recipe-time">{{ recipe.create_time }}</span>
                                                </div>
                                                <div>
                                                    <el-tag v-for="tag in (recipe.tags || '').split(',')" :key="tag"
                                                        style="margin: 10px 10px 10px 0;">
                                                        {{ tag }}
                                                    </el-tag>
                                                </div>
                                                <div class="recipe-summary">功效：{{ recipe.summary }}</div>
                                                <el-divider></el-divider>
                                            </div>
                                            <el-row type="flex" justify="space-between" class="recipe-stats">
                                                <el-col :span="12" class="stats-text">
                                                    <span>{{ recipe.collect_count }}人收藏</span> |
                                                    <span>{{ recipe.eat_count }}人想吃</span> |
                                                    <span>{{ recipe.score_count }}人评价</span>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                </el-card>
                            </el-col>
                        </template>
                    </el-row>
                </el-card>
                <!-- 分页组件 -->
                <div style="display: flex; justify-content: center; margin-top: 20px;" v-if="!loading">
                    <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                        :current-page="currentPage" @current-change="handlePageChange" />
                </div>
            </el-col>
        </el-row>
        <Top />
    </div>
    <Footer />
</template>
<script setup>
import Header from '~/components/Header.vue';
import Footer from '~/components/Footer.vue';
import Post from '~/components/Post.vue';
import Top from '~/components/Top.vue';
import { getrecipelist } from '~/api/recipe';
import { getcategory } from '~/api/release';
import { ref, reactive } from 'vue';
import { ElSkeleton, ElSkeletonItem, ElEmpty } from 'element-plus';

// 引入骨架屏组件
const loading = ref(true);

// 分页相关的数据
const total = ref(0); // 总条数
const pageSize = ref(8); // 每页显示条数
const currentPage = ref(1); // 当前页码
const searchname = ref('');
const category_id = ref('')
const recipeList = ref([]);
const state = reactive({ category: '食谱' });
const selectedOption = ref([])
getcategory(state).then(res => {
    selectedOption.value = res.categories
})

const getData = () => {
    loading.value = true;
    getrecipelist(currentPage.value, pageSize.value, searchname.value, category_id.value).then((res) => {
        console.log(res)
        recipeList.value = res.recipelist;
        total.value = res.total;
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    });
}
getData()
// 分页改变时触发的方法
const handlePageChange = (newPage) => {
    currentPage.value = newPage;
    getData();
};
</script>
<style scoped>
.content {
    margin: 20px auto;
    width: 1024px;
}

.Management {
    color: rgb(7, 246, 182);
}

.el-icon {
    width: 40px;
    height: auto;
}

.el-icon svg {
    height: 40px;
    width: 40px;
}

.content_item {
    margin-bottom: 20px;
}

/* 头部样式 */
.header-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.icon-container {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 搜素样式 */
.search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 10px;

    border-radius: 8px;

}

.search-select {
    width: 200px;
    margin-right: 10px;
}

.search-input {
    flex-grow: 1;
}

.search-button {
    background-color: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.search-button:hover {
    background-color: #66b1ff;
}

/* 食谱推荐样式 */
.recipe-item {
    margin-bottom: 20px;
}

.recipe-card {
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
}

.recipe-image {

    position: relative;
}

.recipe-img {

    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

.recipe-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;
}

.recipe-title {
    font-size: 22px;
    margin-bottom: 5px;
    font-weight: bold;
    margin: 0;
}

.recipe-meta {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}


.recipe-summary {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
}

.stats-text {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #666;
}

.stats-icons {
    flex: unset;
}

.stats-icons i {
    margin: 0 10px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
}

.stats-icons .el-icon {
    width: 16px;
}

.stats-icons i:hover {
    color: #409eff;
}
</style>